<template>
  <!-- hover显示的内容 -->
  <el-tooltip :disabled="!buttonConfig.hoverText" effect="dark" :content="buttonConfig.hoverText" placement="top-start">
    <el-button ref="buttonRef" :type="buttonConfig.type" v-click-outside="onClickOutside">
      <el-icon v-if="buttonConfig.icon">
        <component :is="buttonConfig.icon"></component>
      </el-icon>
      {{ buttonConfig.text }}
    </el-button>
  </el-tooltip>

  <!-- 点击的弹窗 -->
  <el-popover :disabled="!buttonConfig.clickShow" ref="popoverRef" :virtual-ref="buttonRef" trigger="click" title="标题"
    virtual-triggering>
    <template #default>
      <slot name="clickInner"></slot>
    </template>
  </el-popover>
</template>

<script lang="ts" setup>
import { ref, unref } from 'vue'
import { buttonConfigType } from './index.d'
import { ClickOutside as vClickOutside } from 'element-plus'

const props = defineProps<{
  buttonConfig: buttonConfigType
}>()

const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}

</script>